<template>
	<view class="container">
		<view class="head">
			<view class="head-background" :style="{ backgroundImage: `url(${memberInfo.banner_image_id > 0 ? memberInfo.banner.file_path : staticFileDomain + '/static/temp/mine-head.png'})` }"></view>
			<view class="matchmaker-face">
				<image class="matchmaker-face-image" :src="memberInfo.avatar ? memberInfo.avatar.file_path : ''"></image>
				<image class="matchmaker-face-vip" v-if="memberInfo.is_vip" :src="memberInfo.vip_file ? memberInfo.vip_file : ''"></image>
			</view>
			<view class="matchmaker-name">{{ memberInfo.nickName }}</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :height="scrollHeight + 'px'">
			<block v-for="item in momentList" :key="item.moment_id" :id="'momentId-' + item.moment_id"><moment-card :moment-object="item"></moment-card></block>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import momentCard from '@/components/custom/moment-card.vue';
export default {
	mixins: [MescrollMixin],
	components: { momentCard },
	data() {
		return {
			user_id: null,
			memberData: {},
			memberInfo: {},
			scrollHeight: null,
			momentList: []
		};
	},
	onLoad(options) {
		this.user_id = options.user_id;
		this.getMatchmakerDetail();
	},
	onShow() {
		if (!this.scrollHeight) {
			const systemInfo = uni.getSystemInfoSync();
			// #ifdef MP
			this.scrollHeight = systemInfo.windowHeight - uni.upx2px(305);
			// #endif
			// #ifndef MP
			this.scrollHeight = systemInfo.windowHeight - systemInfo.statusBarHeight - uni.upx2px(305) - 44;
			// #endif
		}
	},
	methods: {
		getMatchmakerDetail() {
			this.$u.api.getOtherUserDetail(this.user_id).then(res => {
				const { data, info, match } = res.data;
				this.memberData = data || {};
				this.memberInfo = info;
				uni.setNavigationBarTitle({
					title: `红娘-${info.nickName}的空间`
				});
			});
		},
		upCallback(mescroll) {
			this.$u.api.getMomentList(mescroll.num, this.user_id).then(res => {
				const data = res.data.list;
				if (mescroll.num == 1) {
					this.momentList = data.data;
				} else {
					this.momentList.push(data.list);
				}
				this.mescroll.endBySize(data.data.length, data.total);
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.head {
	/* #ifdef MP */
	height: 305rpx;
	/* #endif */
	/* #ifndef MP */
	height: calc(var(--status-bar-height) + 44px + 305rpx);
	/* #endif */
	background-color: #fff;
	width: 750rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	.head-background {
		width: 750rpx;
		position: absolute;
		top: 0;
		/* #ifdef MP */
		height: 200rpx;
		/* #endif */
		/* #ifndef MP */
		height: calc(var(--status-bar-height) + 44px + 200rpx);
		/* #endif */
		background-position: center bottom;
		background-size: cover;
		z-index: 1;
	}
	.matchmaker-face {
		width: 144rpx;
		height: 144rpx;
		border-radius: 72rpx;
		border: 2rpx solid #ffffff;
		z-index: 10;
		position: relative;
		.matchmaker-face-image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 70rpx;
		}
		.matchmaker-face-vip{
			position: absolute;
			bottom: -10rpx;
			right: -20rpx;
			width: 60rpx;
			height: 60rpx;
		}
	}
	.matchmaker-name {
		height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15rpx;
		z-index: 10;
	}
}
</style>
